<!--
  功能：功能描述
  作者：TianI
  邮箱：1249646236@qq.com
  时间：2022年01月29日 12:22:59
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div>
    <el-container class="el-container">
      <el-header>
        <h1>新增房产项目</h1>
        <!-- <span class="biaoti1">新增房产项目</span> -->
        <!-- <h1>新增房产项目</h1> -->
        <!-- 第一步:定义出5个步骤 -->
        <el-steps :active="active" simple style="flex-basis: 25%">
          <el-step
            title="关联房产公司信息"
            icon="el-icon-edit"
            style="flex-basis: 25%"
          ></el-step>
          <el-step
            title=" 关联房产静态资源"
            icon="el-icon-picture"
            style="flex-basis: 25%"
          >
          </el-step>
          <el-step
            title="关联房产配套属性"
            icon="el-icon-picture"
            style="flex-basis: 25%"
          ></el-step>
          <el-step
            title="关联房产详情信息"
            icon="el-icon-upload"
            style="flex-basis: 25%"
          ></el-step>
          <el-step title="提交房产数据" icon="el-icon-picture"></el-step>
        </el-steps>
      </el-header>
      <el-main>
        <!-- 第二步:定义form表单 -->
        <el-form
          ref="dataForm"
          :model="form"
          label-position="right"
          label-width="120px"
          style="margin-top: 70px"
        >
          <!-- 第三步:定义4个盒子对象active => 1 到 4 -->
          <div v-show="active == 1">
            <!-- 第四步:放置表单项  -->
            <el-form-item label="Tips:" prop="">
              <h3 style="float: left; margin-top: 0px">
                新增房产项目需要关联已有公司,若公司尚未存在,
                <router-link to="/company/company" style="color: skyblue">
                  请点击前往新增公司!!!
                </router-link>
              </h3>
            </el-form-item>
            <el-form-item label="总公司名称">
              <el-select
                v-model="form.companyId"
                clearable
                filterable
                placeholder="请选择"
                @change="getDcompany"
                style="float: left"
              >
                <el-option
                  v-for="item in dict.company_id"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="分公司">
              <el-select
                v-model="form.dcompanyId"
                clearable
                placeholder="请选择"
                style="float: left"
              >
                <el-option
                  v-for="item in dcompany"
                  :key="item.dcompanyId"
                  :label="item.dcompanyName"
                  :value="item.dcompanyId"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="房产项目简介">
              <quill-editor
                ref="myQuillEditor"
                v-model="form.detail.projectBrief"
                class="editor"
                style="width: 800px"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @change="onEditorChange($event)"
              />
            </el-form-item>
          </div>
          <div v-show="active == 2">
            <!--            <el-form-item label="首页轮播图" prop="">-->
            <!--              <el-upload-->
            <!--                :action="fileUploadApi + '?companyId=' + form.companyId"-->
            <!--                list-type="picture-card"-->
            <!--                v-model="form.bannerUrl"-->
            <!--                style="float: left"-->
            <!--                :on-success="handleBannerSuccess"-->
            <!--                :on-exceed="handleExceed"-->
            <!--              >-->
            <!--                <i slot="default" class="el-icon-plus"></i>-->
            <!--                <div slot="file" slot-scope="{ file }">-->
            <!--                  <img-->
            <!--                    class="el-upload-list__item-thumbnail"-->
            <!--                    :src="file.url"-->
            <!--                    alt=""-->
            <!--                  />-->
            <!--                  <span class="el-upload-list__item-actions">-->
            <!--                    <span-->
            <!--                      class="el-upload-list__item-preview"-->
            <!--                      @click="handlePictureCardPreview(file)"-->
            <!--                    >-->
            <!--                      <i class="el-icon-zoom-in"></i>-->
            <!--                    </span>-->
            <!--                    <span-->
            <!--                      v-if="!disabled"-->
            <!--                      class="el-upload-list__item-delete"-->
            <!--                      @click="handleDownload(file)"-->
            <!--                    >-->
            <!--                      <i class="el-icon-download"></i>-->
            <!--                    </span>-->
            <!--                    <span-->
            <!--                      v-if="!disabled"-->
            <!--                      class="el-upload-list__item-delete"-->
            <!--                      @click="handleRemove(file)"-->
            <!--                    >-->
            <!--                      <i class="el-icon-delete"></i>-->
            <!--                    </span>-->
            <!--                  </span>-->
            <!--                </div>-->
            <!--              </el-upload>-->
            <!--              <el-dialog :visible.sync="dialogVisible">-->
            <!--                <img width="100%" :src="dialogImageUrl" alt="" />-->
            <!--              </el-dialog>-->
            <!--            </el-form-item>-->
            <el-form-item label="房产项目缩略图" prop="">
              <el-upload
                :action="locationUploadApi"
                list-type="picture-card"
                style="float: left"
                :limit="1"
                :on-success="handleThumbnailSuccess"
                :on-exceed="handleThumbnailExceed"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <i class="el-icon-download"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt=""/>
              </el-dialog>
            </el-form-item>
            <el-form-item label="房产项目介绍图" prop="">
              <el-upload
                :action="locationUploadApi"
                list-type="picture-card"
                style="float: left"
                :on-success="handleIntroductSuccess"
                :on-exceed="handleExceed"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <i class="el-icon-download"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt=""/>
              </el-dialog>
            </el-form-item>
          </div>
          <div v-show="active == 3">
            <el-tabs
              v-model="activeName"
              type="card"
              :tab-position="tabPosition"
              @tab-click="handleClick"
            >
              <el-tab-pane label="新增配套" name="first">
                <div>
                  <el-button
                    type="primary"
                    style="margin-right: 1450px"
                    round
                    @click="addShow"
                  >
                    点击添加配套信息 +
                  </el-button>
                </div>
                <div class="tab" style="float: left" v-show="this.show >= 1">
                  <br/>
                  <span>
                    <h3 style="text-align: left; margin-left: 30px">配套一</h3>
                  </span>
                  <el-form-item label="配套分类" prop="locationCategoryId1">
                    <el-select
                      v-model="form.location[0].locationCategoryId"
                      filterable
                      placeholder="请选择"
                      style="float: left"
                    >
                      <el-option
                        v-for="item in dict.location_category_id"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="配套名称">
                    <el-input
                      v-model="form.location[0].locationName"
                      style="width: 300px; float: left"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="配套距离">
                    <el-input-number
                      v-model="form.location[0].num"
                      :step="0.1"
                      step-strictly
                      style="float: left"
                      label="Km"
                    >
                    </el-input-number>
                    <span style="float: left; margin-left: 20px">Km</span>
                    <!-- <br> -->
                  </el-form-item>
                  <br/>
                </div>
                <div class="tab" style="float: left" v-show="this.show >= 2">
                  <br/>
                  <span>
                    <h3 style="text-align: left; margin-left: 30px">配套二</h3>
                    <!-- <h3 style="text-align: right; margin-right: 30px;" >点击删除配套信息</h3> -->
                  </span>
                  <el-form-item label="配套分类" prop="locationCategoryId2">
                    <el-select
                      v-model="form.location[1].locationCategoryId"
                      filterable
                      placeholder="请选择"
                      style="float: left"
                    >
                      <el-option
                        v-for="item in dict.location_category_id"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="配套名称">
                    <el-input
                      v-model="form.location[1].locationName"
                      style="width: 300px; float: left"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="配套距离">
                    <el-input-number
                      v-model="form.location[1].num"
                      :step="0.1"
                      step-strictly
                      style="float: left"
                      label="Km"
                    >
                    </el-input-number>
                    <span style="float: left; margin-left: 20px">Km</span>
                  </el-form-item>
                  <br/>
                </div>
                <div class="tab" style="float: left" v-show="this.show >= 3">
                  <br/>
                  <span>
                    <h3 style="text-align: left; margin-left: 30px">配套三</h3>
                  </span>
                  <el-form-item label="配套分类" prop="locationCategoryId3">
                    <el-select
                      v-model="form.location[2].locationCategoryId"
                      filterable
                      placeholder="请选择"
                      style="float: left"
                    >
                      <el-option
                        v-for="item in dict.location_category_id"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="配套名称">
                    <el-input
                      v-model="form.location[2].locationName"
                      style="width: 300px; float: left"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="配套距离">
                    <el-input-number
                      v-model="form.location[2].num"
                      :step="0.1"
                      step-strictly
                      style="float: left"
                      label="Km"
                    >
                    </el-input-number>
                    <span style="float: left; margin-left: 20px">Km</span>
                  </el-form-item>
                  <br/>
                </div>
                <div class="tab" style="float: left" v-show="this.show >= 4">
                  <br/>
                  <span>
                    <h3 style="text-align: left; margin-left: 30px">配套四</h3>
                  </span>
                  <el-form-item label="配套分类" prop="locationCategoryId4">
                    <el-select
                      v-model="form.location[3].locationCategoryId"
                      filterable
                      placeholder="请选择"
                      style="float: left"
                    >
                      <el-option
                        v-for="item in dict.location_category_id"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="配套名称">
                    <el-input
                      v-model="form.location[3].locationName"
                      style="width: 300px; float: left"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="配套距离">
                    <el-input-number
                      v-model="form.location[3].num"
                      :step="0.1"
                      step-strictly
                      style="float: left"
                      label="Km"
                    >
                    </el-input-number>
                    <span style="float: left; margin-left: 20px">Km</span>
                  </el-form-item>
                  <br/>
                </div>
              </el-tab-pane>
              <el-tab-pane label="置业顾问" name="second">
                <div>
                  <el-button
                    type="primary"
                    style="margin-right: 1450px"
                    round
                    @click="addConsultant"
                  >
                    点击添加置业顾问 +
                  </el-button>
                </div>
                <div
                  class="tab"
                  style="float: left"
                  v-show="this.showConsultant >= 1"
                >
                  <br/>
                  <span>
                    <h3 style="text-align: left; margin-left: 30px">
                      置业顾问一
                    </h3>
                  </span>

                  <el-form-item label="置业顾问名称">
                    <el-input
                      v-model="form.consultant[0].name"
                      style="width: 300px; float: left"
                    >
                    </el-input>
                  </el-form-item>

                  <el-form-item label="置业顾问手机号">
                    <el-input
                      v-model="form.consultant[0].phone"
                      style="width: 300px; float: left"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="置业顾问头像" prop="">
                    <el-upload
                      :action="locationUploadApi"
                      list-type="picture-card"
                      style="float: left"
                      :limit="1"
                      :on-success="handleAvatar1"
                      :on-exceed="handleExceed"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                            <i class="el-icon-download"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt=""/>
                    </el-dialog>
                  </el-form-item>
                  <br/>
                </div>
                <div
                  class="tab"
                  style="float: left"
                  v-show="this.showConsultant >= 2"
                >
                  <br/>
                  <span>
                    <h3 style="text-align: left; margin-left: 30px">
                      置业顾问二
                    </h3>
                    <!-- <h3 style="text-align: right; margin-right: 30px;" >点击删除配套信息</h3> -->
                  </span>
                  <el-form-item label="置业顾问名称">
                    <el-input
                      v-model="form.consultant[1].name"
                      style="width: 300px; float: left"
                    >
                    </el-input>
                  </el-form-item>

                  <el-form-item label="置业顾问手机号">
                    <el-input
                      v-model="form.consultant[1].phone"
                      style="width: 300px; float: left"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="置业顾问头像" prop="">
                    <el-upload
                      :action="locationUploadApi"
                      list-type="picture-card"
                      style="float: left"
                      :limit="1"
                      :on-success="handleAvatar2"
                      :on-exceed="handleExceed"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                            <i class="el-icon-download"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt=""/>
                    </el-dialog>
                  </el-form-item>

                  <br/>
                </div>
                <div
                  class="tab"
                  style="float: left"
                  v-show="this.showConsultant >= 3"
                >
                  <br/>
                  <span>
                    <h3 style="text-align: left; margin-left: 30px">
                      置业顾问三
                    </h3>
                  </span>
                  <el-form-item label="置业顾问名称">
                    <el-input
                      v-model="form.consultant[2].name"
                      style="width: 300px; float: left"
                    >
                    </el-input>
                  </el-form-item>

                  <el-form-item label="置业顾问手机号">
                    <el-input
                      v-model="form.consultant[2].phone"
                      style="width: 300px; float: left"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="置业顾问头像" prop="">
                    <el-upload
                      :action="locationUploadApi"
                      list-type="picture-card"
                      style="float: left"
                      :limit="1"
                      :on-success="handleAvatar3"
                      :on-exceed="handleExceed"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                            <i class="el-icon-download"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt=""/>
                    </el-dialog>
                  </el-form-item>

                  <br/>
                </div>
                <div
                  class="tab"
                  style="float: left"
                  v-show="this.showConsultant >= 4"
                >
                  <br/>
                  <span>
                    <h3 style="text-align: left; margin-left: 30px">
                      置业顾问四
                    </h3>
                  </span>
                  <el-form-item label="置业顾问名称">
                    <el-input
                      v-model="form.consultant[3].name"
                      style="width: 300px; float: left"
                    >
                    </el-input>
                  </el-form-item>

                  <el-form-item label="置业顾问手机号">
                    <el-input
                      v-model="form.consultant[3].phone"
                      style="width: 300px; float: left"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="置业顾问头像" prop="">
                    <el-upload
                      :action="locationUploadApi"
                      list-type="picture-card"
                      style="float: left"
                      :limit="1"
                      :on-success="handleAvatar4"
                      :on-exceed="handleExceed"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                            <i class="el-icon-download"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt=""/>
                    </el-dialog>
                  </el-form-item>

                  <br/>
                </div>
              </el-tab-pane>
              <el-tab-pane label="项目户型" name="third">
                <div>
                  <el-button
                    type="primary"
                    style="margin-right: 1450px"
                    round
                    @click="addHouseType"
                  >
                    点击添加户型信息 +
                  </el-button>
                </div>
                <div
                  class="tab2"
                  style="float: left"
                  v-show="showHouseType >= 1"
                >
                  <br/>
                  <h3 style="text-align: left; margin-left: 30px">户型一</h3>

                  <el-form-item
                    label="户型分类"
                    prop="houseTypeCategory"
                  >
                    <el-select
                      v-model="form.houseType[0].houseTypeCategory"
                      filterable
                      placeholder="请选择"
                      style="float: left"
                    >
                      <el-option
                        v-for="item in dict.house_type_category"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="户型名称" prop="houseTypeName" style="">
                    <el-input
                      v-model="form.houseType[0].houseTypeName"
                      style="width: 370px; float: left"
                    />
                  </el-form-item>
                  <el-form-item label="户型图片" prop="">
                    <el-upload
                      :action="locationUploadApi"
                      list-type="picture-card"
                      style="float: left"
                      :limit="1"
                      :on-success="handleTypeSuccess1"
                      :on-exceed="handleTypeExceed"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                            <i class="el-icon-download"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt=""/>
                    </el-dialog>
                  </el-form-item>
                  <el-form-item label="户型价格" prop="houseTypePrice">
                    <el-input
                      v-model="form.houseType[0].houseTypePrice"
                      style="width: 370px; float: left"
                    />
                  </el-form-item>
                  <el-form-item label="户型类型" prop="houseType">
                    <el-input
                      v-model="form.houseType[0].houseType"
                      style="width: 370px; float: left"
                    />
                  </el-form-item>
                  <el-form-item
                    label="户型分布"
                    prop="houseTypeDistribution"
                    style=""
                  >
                    <el-input
                      v-model="form.houseType[0].houseTypeDistribution"
                      style="width: 370px; float: left"
                    />
                  </el-form-item>
                  <el-form-item label="户型解析" prop="houseTypeAnalysis">
                    <el-input
                      v-model="form.houseType[0].houseTypeAnalysis"
                      type="textarea"
                      style="width: 370px; float: left"
                    />
                  </el-form-item>
                  <br/>
                </div>
                <div
                  class="tab2"
                  style="float: left"
                  v-show="this.showHouseType >= 2"
                >
                  <br/>
                  <h3 style="text-align: left; margin-left: 30px">户型二</h3>

                  <el-form-item
                    label="户型分类"
                    prop="houseTypeCategory"
                  >
                    <el-select
                      v-model="form.houseType[1].houseTypeCategory"
                      filterable
                      placeholder="请选择"
                      style="float: left"
                    >
                      <el-option
                        v-for="item in dict.house_type_category"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="户型名称" prop="houseTypeName" style="">
                    <el-input
                      v-model="form.houseType[1].houseTypeName"
                      style="width: 370px; float: left"
                    />
                  </el-form-item>
                  <el-form-item label="户型图片" prop="">
                    <el-upload
                      :action="locationUploadApi"
                      list-type="picture-card"
                      style="float: left"
                      :limit="1"
                      :on-success="handleTypeSuccess2"
                      :on-exceed="handleTypeExceed"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                            <i class="el-icon-download"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt=""/>
                    </el-dialog>
                  </el-form-item>
                  <el-form-item label="户型价格" prop="houseTypePrice">
                    <el-input
                      v-model="form.houseType[1].houseTypePrice"
                      style="width: 370px; float: left"
                    />
                  </el-form-item>
                  <!-- <el-form-item label="户型价格单位" prop="houseTypePriceUnit">
                    <el-input
                      v-model="form.houseTypePriceUnit"
                      style="width: 370px; float: left"
                    />
                  </el-form-item> -->
                  <el-form-item label="户型类型" prop="houseType">
                    <el-input
                      v-model="form.houseType[1].houseType"
                      style="width: 370px; float: left"
                    />
                  </el-form-item>
                  <el-form-item
                    label="户型分布"
                    prop="houseTypeDistribution"
                    style=""
                  >
                    <el-input
                      v-model="form.houseType[1].houseTypeDistribution"
                      style="width: 370px; float: left"
                    />
                  </el-form-item>
                  <el-form-item label="户型解析" prop="houseTypeAnalysis">
                    <el-input
                      v-model="form.houseType[1].houseTypeAnalysis"
                      type="textarea"
                      style="width: 370px; float: left"
                    />
                  </el-form-item>
                  <br/>
                </div>
              </el-tab-pane>
            </el-tabs>
            <!-- </el-tabs> -->
          </div>
          <div v-show="active == 4">
            <div>
              <el-row :gutter="16">
                <el-col :span="10">
                  <el-form-item
                    label="房产项目名称"
                    prop="realEstateProjectName"
                  >
                    <el-input
                      v-model="form.detail.realEstateProjectName"
                      placeholder="请输入房产项目名称"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="备案名" prop="recordName">
                    <el-input
                      v-model="form.detail.recordName"
                      placeholder="请输入备案名"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="物业类别" prop="propertyCategory">
                    <el-input
                      v-model="form.detail.propertyCategory"
                      placeholder="请输入物业类别"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="项目特色" prop="projectFeatures">
                    <el-input
                      v-model="form.detail.projectFeatures"
                      placeholder="请输入项目特色"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="建筑类别" prop="buildingCategory">
                    <el-input
                      v-model="form.detail.buildingCategory"
                      placeholder="请输入建筑类别"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="装修状况" prop="decorateSituation">
                    <el-input
                      v-model="form.detail.decorateSituation"
                      placeholder="请输入装修状况"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="开发商" prop="propertyDevelopers">
                    <el-input
                      v-model="form.detail.propertyDevelopers"
                      placeholder="请输入开发商"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="项目地址" prop="projectAddress">
                    <el-input
                      v-model="form.detail.projectAddress"
                      placeholder="请输入项目地址"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="咨询电话" prop="consultingTelephone">
                    <el-input
                      v-model="form.detail.consultingTelephone"
                      placeholder="请输入咨询电话"
                      :maxlength="11"
                      clearable
                      prefix-icon="el-icon-mobile-phone"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="售楼地址" prop="saleAddress">
                    <el-input
                      v-model="form.detail.saleAddress"
                      placeholder="请输入售楼地址"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="交付时间" prop="deliverTime">
                    <el-date-picker
                      type="datetime"
                      v-model="form.detail.deliverTime"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :style="{ width: '100%' }"
                      placeholder="请选择交付时间"
                      clearable
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="开盘时间" prop="openTime">
                    <el-date-picker
                      type="datetime"
                      v-model="form.detail.openTime"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :style="{ width: '100%' }"
                      placeholder="请选择开盘时间"
                      clearable
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="价格左区间" prop="minimumPrice">
                    <el-input
                      v-model="form.detail.minimumPrice"
                      placeholder="请输入价格左区间"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    >
                      <template slot="append">万</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="价格右区间" prop="maximumPrice">
                    <el-input
                      v-model="form.detail.maximumPrice"
                      placeholder="请输入价格右区间"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    >
                      <template slot="append">万</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <!-- <el-form-item label="价格单位" prop="priceUnit">
                    <el-input
                      v-model="form.detail.priceUnit"
                      placeholder="请输入价格单位"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item> -->
                </el-col>
                <el-col :span="3">
                  <el-form-item label="绿化率" prop="greeningRate">
                    <el-input-number
                      v-model="form.detail.greeningRate"
                      placeholder="绿化率"
                      :step="0.1"
                      :max="1"
                    >
                    </el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item label="容积率" prop="plotRatio">
                    <el-input-number
                      v-model="form.detail.plotRatio"
                      placeholder="容积率"
                      :step="0.1"
                      :max="1"
                    >
                    </el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="开关" prop="onSale" required>
                    <el-switch
                      v-model="form.detail.onSale"
                      active-text="在售"
                      inactive-text="停售"
                      active-color="#53DD30"
                      inactive-color="#F11C1C"
                    ></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="房产标签" prop="projectLabel">
                    <el-input
                      v-model="form.detail.projectLabel"
                      placeholder="请输入房产标签"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    >
                      <!-- <template slot="append">啊</template> -->
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="10">
                  <el-form-item label="物业公司名称" prop="propertyCompanyName">
                    <el-input
                      v-model="form.detail.propertyCompanyName"
                      placeholder="请输入物业公司名称"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    >
                      <!-- <template slot="append">啊</template> -->
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="楼层状况" prop="floorCondition">
                    <el-input
                      v-model="form.detail.floorCondition"
                      placeholder="请输入楼层状况"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="占地面积" prop="floorSpace">
                    <el-input
                      v-model="form.detail.floorSpace"
                      placeholder="请输入占地面积"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    >
                      <template slot="append">亩</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="建筑面积" prop="coveredArea">
                    <el-input
                      v-model="form.detail.coveredArea"
                      placeholder="请输入建筑面积"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    >
                      <template slot="append">万平方米</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="总户数" prop="householdsTotal">
                    <el-input
                      v-model="form.detail.householdsTotal"
                      placeholder="请输入总户数"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    >
                      <template slot="append">户</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="停车位总数" prop="parkingSpaceTotal">
                    <el-input
                      v-model="form.detail.parkingSpaceTotal"
                      placeholder="请输入停车位总数"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    >
                      <template slot="append">个</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="楼栋总数" prop="buildingTotal">
                    <el-input
                      v-model="form.detail.buildingTotal"
                      placeholder="请输入楼栋总数"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    >
                      <template slot="append">栋</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="物业费" prop="propertyFee">
                    <el-input
                      v-model="form.detail.propertyFee"
                      placeholder="请输入物业费"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    >
                      <template slot="append">元/m²·月</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="房产项目纬度" prop="propertyFee">
                    <el-input
                      v-model="form.detail.latitude"
                      placeholder="请输入房产项目纬度"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="房产项目经度" prop="propertyFee">
                    <el-input
                      v-model="form.detail.longitude"
                      placeholder="请输入房产项目经度"
                      clearable
                      prefix-icon="el-icon-caret-right"
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <div v-show="active == 5">
            <el-dialog
              title="提示"
              :visible.sync="centerDialogVisible"
              width="30%"
              center
            >
              <span
              >恭喜你,新增房产项目成功,点击确定前往房产详情列表页查看</span
              >
              <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false"
                >取 消</el-button
                >
                <el-button type="primary" @click="successRoute">
                  确 定
                </el-button>
              </span>
            </el-dialog>
            <span style="font-size: 30px"
            >恭喜你,新增房产项目成功,点击确定前往房产详情列表页查看</span
            >
            <br/>
            <!-- <el-button type="primary" v-if="active == 5" @click="route"
              >前往房产详情列表页查看</el-button
            > -->
          </div>
        </el-form>
      </el-main>
      <el-footer>
        <!-- 第五步:设置上一步和下一步的按钮 -->

        <el-button
          style="border-radius: 4px"
          type="primary"
          v-if="active > 1 && active < 5"
          @click="pre"
          icon="el-icon-arrow-left"
        >
          上一步
        </el-button>
        <el-button type="primary" v-if="active < 4" @click="next">
          下一步
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
        <el-button type="primary" v-if="active == 4" @click="submit"
        >提交数据
        </el-button
        >
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import realestate from "@/api/realestate/realestate.js";

export default {
  // 组件名称
  name: "Save",
  dicts: [
    "location_category_id",
    "real_estate_project_id",
    "company_id",
    "house_type_category",
  ],

  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      // 默认第一步
      show: 1,
      centerDialogVisible: false,
      showConsultant: 1,
      showHouseType: 1,
      tabPosition: "top",
      activeName: "first",
      active: 1,
      fileName: "",
      imgUrl: "https://www.f-cloud.top/web/file/图片/",
      fileUploadApi: "https://www.f-cloud.top/web/api/banner/upload",
      locationUploadApi: "https://www.f-cloud.top/web/api/localStorage/pictures",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      element: {},
      dcompany: [],
      form: {
        bannerUrl: [],
        companyId: "",
        dcompanyId: "",
        thumbnail: [],
        introduce: [],
        detail: {
          realEstateProjectName: undefined,
          projectLabel: undefined,
          recordName: undefined,
          propertyCategory: undefined,
          projectFeatures: undefined,
          buildingCategory: undefined,
          decorateSituation: undefined,
          propertyDevelopers: undefined,
          projectAddress: "",
          consultingTelephone: "",
          saleAddress: undefined,
          deliverTime: "",
          openTime: "",
          minimumPrice: undefined,
          maximumPrice: undefined,
          priceUnit: undefined,
          greeningRate: 0,
          plotRatio: 0,
          onSale: true,
          propertyCompanyName: undefined,
          propertyFee: undefined,
          floorSpace: undefined,
          coveredArea: undefined,
          householdsTotal: undefined,
          parkingSpaceTotal: undefined,
          buildingTotal: undefined,
          floorCondition: undefined,
          projectBrief: "",
          latitude: "",
          longitude: ""
        },
        location: [
          {
            num: 1,
            locationCategoryId: "",
            locationName: "",
          },
          {
            num: 1,
            locationCategoryId: "",
            locationName: "",
          },
          {
            num: 1,
            locationCategoryId: "",
            locationName: "",
          },
          {
            num: 1,
            locationCategoryId: "",
            locationName: "",
          },
        ],
        consultant: [
          {
            name: "",
            phone: "",
            avatar: "",
          },
          {
            name: "",
            phone: "",
            avatar: "",
          },
          {
            name: "",
            phone: "",
            avatar: "",
          },
          {
            name: "",
            phone: "",
            avatar: "",
          },
        ],
        houseType: [
          {
            houseTypeCategory: "",
            houseTypeName: "",
            houseTypeUrl: "",
            houseTypePrice: "",
            houseType: "",
            houseTypeDistribution: "",
            houseTypeAnalysis: "",
          },
          {
            houseTypeCategory: "",
            houseTypeName: "",
            houseTypeUrl: "",
            houseTypePrice: "",
            houseType: "",
            houseTypeDistribution: "",
            houseTypeAnalysis: "",
          },
        ],
      },
      editorOption: {
        placeholder: "请在这里输入",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], //引用，代码块
            [{header: 1}, {header: 2}], // 标题，键值对的形式；1、2表示字体大小
            [{list: "ordered"}, {list: "bullet"}], //列表
            [{script: "sub"}, {script: "super"}], // 上下标
            [{indent: "-1"}, {indent: "+1"}], // 缩进
            [{direction: "rtl"}], // 文本方向
            [{size: ["small", false, "large", "huge"]}], // 字体大小
            [{header: [1, 2, 3, 4, 5, 6, false]}], //几级标题
            [{color: []}, {background: []}], // 字体颜色，字体背景颜色
            [{font: []}], //字体
            [{align: []}], //对齐方式
            ["clean"], //清除字体样式
            ["image", "video"], //上传图片、上传视频
          ],
        },
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    addShow() {
      this.show++;
      if (this.show >= 5) {
        this.$message({
          message: "想要新增更多配套信息,烦请前往项目区位管理继续添加!",
          type: "warning",
        });
      }
    },
    addConsultant() {
      this.showConsultant++;
      if (this.showConsultant >= 5) {
        this.$message({
          message: "想要新增更多置业顾问,烦请前往置业顾问管理页面继续添加!",
          type: "warning",
        });
      }
    },
    addHouseType() {
      this.showHouseType++;
      if (this.showHouseType >= 3) {
        this.$message({
          message: "想要新增更多房产户型,烦请前往房产户型管理页面继续添加!",
          type: "warning",
        });
      }
    },
    handleBannerSuccess(res, file) {
      this.form.bannerUrl.push(res);
      console.log(this.form);
      console.log("this.form.bannerUrl", this.form.bannerUrl);
    },
    handleThumbnailSuccess(res, file) {
      this.form.thumbnail.push(res);
    },
    handleIntroductSuccess(res, file) {
      this.form.introduce.push(res);
    },
    handleThumbnailExceed() {
      this.$message.warning(`一个房产项目只能有一个缩略图 !!!`);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`用户只能有一个头像 !!!`);
    },
    handleTypeExceed() {
      this.$message.warning(`一种户型只能上传一张图片 !!!`);
    },
    handleAvatar1(res) {
      console.log(res);
      this.form.consultant[0].avatar = res;
    },
    handleAvatar2(res) {
      this.form.consultant[1].avatar = res;
    },
    handleAvatar3(res) {
      this.form.consultant[2].avatar = res;
    },
    handleAvatar4(res) {
      this.form.consultant[3].avatar = res;
    },
    handleTypeSuccess1(res) {
      this.form.houseType[0].houseTypeUrl = res;
    },
    handleTypeSuccess2(res) {
      this.form.houseType[1].houseTypeUrl = res;
    },
    getDcompany(value) {
      if (value != "") {
        console.log("查询子公司", value);
        realestate.getDcompany(value).then((response) => {
          console.log(this.form.dcompanyName);
          this.form.dcompanyId = "";
          this.dcompany = [];

          console.log(response.data);
          for (let index = 0; index < response.data.length; index++) {
            this.element = response.data[index];
            this.dcompany.push(this.element);
          }
          console.log(this.element);
          console.log(this.element.dcompanyName);
          console.log(this.element.dcompanyId);

          // this.dcompany.dcompanyId = response.
        });
      } else {
        this.$message.success(`成功清除。`);
        console.log(this.dcompany);
        this.dcompany = [];
        this.form.dcompanyId = "";
      }
    },
    successRoute() {
      this.$router.push({path: "/attribute/detail"});
      this.centerDialogVisible = false;
    },
    submit() {
      this.centerDialogVisible = true;
      if (this.active++ > 4) this.active = 1;
      console.log("提交的房产总数据====", this.form);
      realestate.save(this.form).then((response) => {
        this.$message({
          message: "新增房产成功",
          type: "success",
        });
      });
    },
    // 步骤条下一步的方法
    next() {
      if (this.active++ > 4) this.active = 1;
    },

    // 步骤条上一步的方法
    pre() {
      if (this.active-- < 2) this.active = 1;
    },
    handleRemove(file) {
      console.log(file, "删除");
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      console.log(this.dialogImageUrl);
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
  },
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {
  },
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {
  },
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {
  },
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {
  },
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {
  },
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {
  },
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->

<style lang="scss">
.el-button {
  top: auto;
  margin: 0 auto;
}

* {
  font-family: "Hiragino Sans GB";
}

// .biaoti1 {
//    20px Extra large;
// }

.tab {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  width: 700px;
  margin-left: 10px;
  height: auto;
  margin: 20px;
}

.tab2 {
  margin: 10px;
  border-top: 10px;
  margin-right: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin-left: 10px;
  width: 700px;
  height: 600px;
}

.ql-container.ql-snow {
  height: 300px;
}

// .el-steps.el-steps--simple {
//   width: auto;
//   flex-basis: 20%;
// }
div.el-step.is-simple {
  flex-basis: 23%;
  margin-right: 0px;
}

.el-step__head.is-finish {
  height: 25px;
}

.el-step__head.is-process {
  height: 25px;
}

.el-step__head.is-wait {
  height: 25px;
}

.m-header {
  height: 60 * 10 !important;
}

.el-container {
  background-color: white;
}

.quill-editor.editor {
  width: 800px;
}

.el-header,
.el-footer {
  background-color: white;
  color: #333;
  text-align: center;
  height: 300%;
  line-height: 40px;
}

.el-main {
  min-height: calc(100vh - 240px);
  background-color: white;
  color: #333;
  text-align: center;
  height: 700px;
  /* line-height: 500px; */
}
</style>
